<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>百度前端学院html任务六</title>
	<style>
	body{width:980px;margin:0 auto;padding:0;font-family:Microsoft YaHei;}
	ul{margin:0;padding: 0;}
	li{list-style: none;margin:0;padding: 0;}
	p{margin:0;}
	header{width:892px;height:61px;margin:0 auto;border-bottom: 2px #938e8c solid;}
	header p{top:49px;position: relative;font-size: 12px;font-family: SimHei;}
	header div{width: 110px;height:61px;float:left;}
	header .top-l{color: #fff;float:left;background:#ce363b;}
	header .top-r{float:right;color:#d45d5c; text-align: right;}
	.main{width: 892px;margin:20px auto;overflow: auto; }
	.main .main-tl{width:641px;height:301px;margin:0 30px 20px 0;background: url(img/1.jpg) no-repeat;background-size:641px 301px; float:left;}
	.main .main-tl div{width:191px;height:301px;opacity: 0.5;}
	.main .main-tl .gre{background: green;float:left;}
	.main .main-tl .red{background:red;float:right;}
	.main .main-tr{width:203px;height:301px;border-top:2px solid #cc8091;float:right;}
	.main .main-tr ul{width:203px;height: 301px;}
	.main .main-tr ul li{width:203px;margin: 0;padding: 0;}
	.main .main-tr ul .font01{color:#000;font-size:24px;line-height:40px;}
	.main .main-tr ul .font01 span{border-bottom: 2px solid black;}
	.main .main-tr ul .font01:first-letter{font-size:xx-large;}
	.main .main-tr ul .font03{font-family:KaiTi_GB2312 ;font-size:12px;color:#676767;line-height: 10px;}
	.main .main-tr ul .font04{font-size: 116px;color:#75b86b;font-style: italic;margin-left: -30px;}
	.main .main-tr ul .font05{font-size:55px;color:#cc8091;margin-top: -20px;
	}
	.main .main-tr ul .font05 div{float:left;}
	.main .main-tr ul .font05 p{font-size:21px;margin:0;padding-top:20px;}
	.main .main-tr ul .font05 .p2{font-size:12px;padding: 0;}
	.main .line{width:641px;height:160px;margin:20px 0;padding: 0;}
	.main .line div{width:200px;height:160px;float:left;font-size:12px;line-height: 16px;opacity: 0.7; margin-left:20px;}
	.main .line div span{color:#cc7680;margin:0;padding: 0;}
	.main .line .line-l{margin:0;}
	.main .line .line-l h1{font-size:16px;color:#418c59;text-decoration: underline;font-weight: bolder;}
	.main .line .line-c h1{font-size:16px;color:#d2994f;text-decoration: underline;font-weight: bolder;}
	.main .line .line-r h1{font-size:16px;color:#cc7680;text-decoration: underline;font-weight: bolder;}
	.main .bot{width:980px;font-size: 12px;line-height: 16px;color:#767777;margin:20px auto;}
	.main .bot .bot-l{width:415px;float:left;}
	.main .bot .bot-l ul li{margin-top:20px;}
	.main .bot .bot-l ul .bot1{font-size:72px;color:#f5e327;font-weight: bolder;font-family: SimHei;text-align: left;}
	.main .bot .bot-l ul .bot1 span{font-size:42px;color:#11456b;}
	.main .bot .bot-l ul .bot2{height:40px;font-weight: bolder;font-size:33px;color:#11456b;border-bottom: 2px solid #11456b;margin-top:40px;}
	.main .bot .bot-l ul .bot3{margin-top:40px;}
	.main .bot .bot-l ul .bot3 span{width:70px;height:40px;color:#f6e327;font-size:70px;vertical-align: top;display: block;float: left;margin-top: 20px;}
	.main .bot .bot-l ul .bot3 img{width:167px;height:288px;float: right;margin:2px;padding: 2px;}
	.main .bot .bot-l ul .bot3 div{text-indent: 25px;}
	.main .bot .bot-r{width:458px;margin-left: 19px;float:left;vertical-align: top;}
	.main .bot .bot-r 
	ul li .img-text{width:458px;height:61px;color:#72b16a;font-size: 12px;margin-top:-44px; font-style: italic;}
	.main .bot .bot-r 
	ul li .img-text span{height:44px;color: #fff;font-size: 26px;margin:0 5px;border-left: 3px solid #72b16a;padding: 2px;font-style: normal;}
	.main .bot .bot-r .fin{width:445px;height: 318px;margin-top:20px;background: #f7ded9;padding: 5px;}
	.main .bot .bot-r .fin li{height:30px;font-size: 16px;color:#5b5b5b;text-align: left;font-family:SimSun ;overflow: auto;margin-top: 20px;}
	.main .bot .bot-r .fin li span{font-size:12px;}
	.main .bot .bot-r .fin li .tra{width: 0;height: 0;border-top:5px solid #f7ded9;border-left:5px solid #f7ded9;border-right:5px solid #f7ded9;border-bottom:5px solid #5b5b5b;float:left;}
	.main .bot .bot-r .fin div{float:left;overflow: hidden;}
	.main .bot .bot-r .fin .fin-bot{width:445px;height: 160px;}
	.main .bot .bot-r .fin .fin-l{width:170px;height: 150px;float: left;background: #ce363b;padding: 0}
	.main .bot .bot-r .fin .fin-l .fin-ll{width:60px;height:100px;font-size: 110px;color: #fff;border-right: 2px solid #fff;margin: 0;padding: 0;line-height: 110px;margin-top: 25px;}
	.main .bot .bot-r .fin .fin-l .fin-lr{width:104px;height:110px;font-size: 12px;color: #fff;margin-top:20px;
		font-family:SimHei ;font-style: italic;}
		.main .bot .bot-r .fin .fin-l .fin-lr span{font-size: 21px;}
	.main .bot .bot-r .fin .fin-r{width:210px;height:130px;color:#5a5b5b;font-size:14px;margin-top:20px;margin-left:15px;float:left;text-align: left;font-weight: bolder;}
	.main .bot .bot-r .fin .fin-r span{width:40px;font-size: 72px;color:#d45b5c;float: left;margin:25px 25px 0 -23px;display: block;padding: 0 0 0 1px;}
	footer{width:892px;height:61px;margin:0 auto;border-top: 1px #938e8c solid;font-family:SimHei;font-size:  12px;color:#d45d5c;text-align: right;}
	</style>
</head>
<body>
	<header>
		<div class="top-l"><p>ife.baidu.com</p></div>
		<div class="top-r"><p>2016.3</p></div>
	</header>
	<div class="main">
		<div class="main-tl">
			<div class="gre"></div>
			<div class="red"></div>
		</div>
		<div class="main-tr">
			<ul>
				<li class="font01"><span>ABOUT</span></li>
				<li class="font01"><span>TECHNOLOGE</span></li>
				<li class="font03">About technologe about technologe about technologe</li>
				<li class="font04">700</li>
				<li class="font05"><div>3.2</div> <div><p class="p1">css</p><p class="p2">cssssccsccscssc</p></div></li>
			</ul>
		</div>
		<div class="line">
			<div class="line-l">
				<h1>What</h1>
				前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
			</div>
			<div class="line-c">
				<h1>When</h1>
				前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
			</div>
			<div class="line-r">
				<h1>How</h1>
				前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
				<p>
					What------<span>40%</span><br>What------<span>30%</span><br>What------<span>30%</span><br>
				</p>
			</div>
		</div>
		<div class="bot">
			<div class="bot-l">
				<ul>
					<li class="bot1">THE <span>TECHONLOGE</span></li>
					<li class="bot1"><span>OF FORONT</span></li>
					<li class="bot2">前端技术领域</li>
					<li class="bot3"><span>前</span>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
					<br>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
					<img src="img/2.jpg">
					<br>
					<div>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</div>
					<div>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</div>
					</li>
				</ul>
			</div>
			<div class="bot-r">
				<ul>
					<li>
						<img src="img/3.jpg">
						<div class="img-text">
							<span>前端技术</span>前端技术前端技术
						</div>
					</li>
					<li class="fin">
						<ul>
							<li><span class="tra"></span>前端前端前端前端前端前端...................<span>前端</span></li>
							<li><span class="tra"></span>前端前端前端前端前端前端...................<span>前端</span></li>
							<li><span class="tra"></span>前端前端前端前端前端前端...................<span>前端</span></li>
							<li class="fin-bot">
								<div class="fin-l">
									<div class="fin-ll">0</div>
									<div class="fin-lr">
										<span>ONE TWO THREE FORE FIVE</span><p>hello world hello world hello world</p>
									</div>
								</div>
								<div class="fin-r">
									<span>“</span>world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello 
									world<span style="float: right;margin:7px 0 0 5px;">”</span>
								</div>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<footer>ife.baidu.com</footer>
</body>
</html>